<template>
  <div class="dialog">
    <el-dialog v-model="props.demoDialogRef" width="50%">
      <template #header>
        <div class="title">
          <p>
            选手详情
            <span class="red">(不可编辑)</span>
          </p>
        </div>
      </template>
      <el-form :model="formData">
        <el-row :gutter="20">
          <el-col :span="14">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="选手编号" :label-width="100">
                  <el-input
                    v-model="formData.number"
                    autocomplete="off"
                    placeholder="请输入选手编号"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="选手分组" :label-width="100">
                  <el-input
                    v-model="formData.group_id"
                    autocomplete="off"
                    placeholder="请输入选手分组"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="选手名称" :label-width="100">
              <el-input
                v-model="formData.name"
                autocomplete="off"
                placeholder="请输入选手名称"
              />
            </el-form-item>
            <el-form-item label="选手简介" :label-width="100">
              <el-input
                v-model="formData.name"
                autocomplete="off"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                maxlength="10"
                placeholder="请输入选手简介，建议10字以内"
              />
            </el-form-item>
            <el-form-item label="选手图片" :label-width="100">
              <!-- <el-input v-model="form.name" autocomplete="off" placeholder="请输入选手分组" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-radio-group v-model="radio1" class="ml-4">
              <el-radio label="1" size="large">
                <span>图片封面</span>
              </el-radio>
              <el-radio label="2" size="large">
                <span>视频封面</span>
              </el-radio>
            </el-radio-group>
            <el-upload
              class="avatar-uploader"
              :action="action"
              v-if="radio1 == '1'"
              :show-file-list="false"
            >
              <img
                v-if="formData.imageUrl"
                :src="formData.imageUrl"
                class="avatar"
              />
              <el-icon v-else class="avatar-uploader-icon">
                <Plus />
              </el-icon>
            </el-upload>
            <el-input
              v-else
              type="textarea"
              v-model="formData.textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              placeholder="请输入视频通用代码，仅支持腾讯和哔哩哔哩"
            ></el-input>
          </el-col>
        </el-row>
        <el-form-item label="选手详情" :label-width="100">
          <el-checkbox v-model="formData.checked1" label="外部链接" />
        </el-form-item>
        <Editor :height="'800px'" v-if="!formData.checked1"></Editor>
        <el-input
          v-else
          v-model="formData.name"
          type="textarea"
          autocomplete="off"
          placeholder="请输入选手分组"
        />
        <!-- <el-form-item class="mt_10" label="产品信息" :label-width="100">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            disabled
          >
            <el-icon style="flex: 24">
              <Plus />
            </el-icon>
            <p style="flex: 24">添加产品信息</p>
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon>
                      <zoom-in />
                    </el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon>
                      <Download />
                    </el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item> -->
        <!-- <el-form-item label="企业荣誉" :label-width="100">
          <el-upload
            action="#"
            list-type="picture-card"
            :auto-upload="false"
            disabled
          >
            <el-icon style="flex: 24">
              <Plus />
            </el-icon>
            <p style="flex: 24">添加企业荣誉</p>
            <template #file="{ file }">
              <div>
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt
                />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <el-icon>
                      <zoom-in />
                    </el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <el-icon>
                      <Download />
                    </el-icon>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
        </el-form-item> -->
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup name="zgApplyEdit">
import type { FormInstance } from "element-plus";
import Popup from "@/components/popup/index.vue";
import Upload from "@/components/upload/index.vue";
import Editor from "@/components/editor/index.vue";
import {
  apiZgApplyAdd,
  apiZgApplyEdit,
  apiZgApplyDetail,
} from "@/api/zg_apply";
import { timeFormat } from "@/utils/util";
import config from "@/config";
import type { PropType } from "vue";
const action = ref(`${config.baseUrl}${config.urlPrefix}/upload/`);

const radio1 = ref("1");
const styles = reactive({
  height: "500px",
});
const props = defineProps({
  demoDialogRef: {
    type: Boolean,
    default: false,
  },
  id: {
    type: Number,
    default: 0,
  },
});
const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();

// 表单数据
const formData = reactive({
  id: "",
});

// 表单验证
const formRules = reactive<any>({});

// 获取详情
const detail = async () => {
  let res = await apiZgApplyDetail(props.id);
};
const setFormData = async (data: Record<any, any>) => {
  for (const key in formData) {
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      formData[key] = data[key];
    }
  }
};
const colse = () => {
  emit("close");
};
defineExpose({
  close,
  setFormData,
});
</script>
